<template>
    <div>
       <div class="recommend-title">
          <span class="iconfont icon-heart">&#xe699;</span>
           猜你喜欢
       </div>
       <ul>
         <router-link tag="li" :to="'/detail/' + item.id" class="list-item"
             v-for="item of recommendList" :key="item.id">
            <div class="item-img">
                <img :src="item.imgUrl" alt="">
            </div>
            <div class="item-img-tag">{{item.tag}}</div>
            <div class="item-info">
                <div class="inner-box">
                    <div class="info-title">{{item.title}}</div>
                    <div class="info-comment">
                        <span class="iconfont icon-star">&#xe64a;</span>
                        <span class="iconfont icon-star">&#xe64a;</span>
                        <span class="iconfont icon-star">&#xe64a;</span>
                        <span class="iconfont icon-star">&#xe64a;</span>
                        <span class="iconfont icon-star">&#xe64a;</span>
                        <span class="comment-num">{{item.commenktNum}}</span>
                    </div>
                    <div class="info-price">
                        <span class="price"><em>{{item.price}}</em></span>
                        起
                        <span class="district">{{item.district}}</span>
                    </div>
                </div>
            </div>
         </router-link>
       </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  },
  data: function () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/css/variables.styl'
    @import '~@/assets/css/mixins.styl'
    div{
        box-sizing:border-box;
    }
    .recommend-title{
        width: 100%;
        height: .8rem;
        line-height: .8rem;
        font-size: .3rem;
        background-color: #eee;
    }
    .recommend-title .icon-heart{
        color: #ff6540;
        margin-right:.08rem;
    }
    .list-item{
        position:relative;
        width:100%;
        height: 2.4rem;
    }
    .list-item .item-img-tag{
        position:absolute;
        top: .2rem;
        left: .2rem;
        width: 1.02rem;
        height: .38rem;
        line-height: .38rem;
        font-size: .2rem;
        text-indent: .04rem;
        background-image: url('../../../assets/imgs/sign.png');
    }
    .list-item .item-img{
        float:left;
        width: 2.4rem;
        height: 2.4rem;
        padding: .2rem;
    }
    .list-item .item-img img{
        width:100%;
        height:100%;
    }
    .list-item .item-info{
        float: left;
        width: 4.8rem;
        height: 2.4rem;
        padding: .4rem .1rem;
    }
    .list-item .item-info .inner-box{
        width: 100%;
        height: 100%;
    }
    .list-item .item-info .inner-box .info-title{
        width: 100%;
        height: .6rem;
        line-height: .6rem;
        font-size: .32rem;
        ellipsis();
    }
    .list-item .item-info .inner-box .info-comment{
        width: 100%;
        height: .4rem;
        line-height: .4rem;
        font-size: .12rem;
    }
    .list-item .item-info .inner-box .info-comment .icon-star{
        color: #ffb436;
        font-size: .2rem;
    }
    .list-item .item-info .inner-box .info-comment .comment-num{
        color: $lighTxtColor;
    }
    .list-item .item-info .info-price{
        position:relative;
        width: 100%;
        height: .6rem;
        line-height: .6rem;
        font-size:.24rem;
        color: $lighTxtColor;
    }
    .list-item .item-info .info-price .price{
        color: #ff8300;
    }
    .list-item .item-info .info-price .price em{
        font-size:.4rem;
    }
    .list-item .item-info .info-price .district{
        position:absolute;
        bottom: 0;
        right: .24rem;
    }
</style>
